<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">

<!--[if lt IE 9]>
<script type="text/javascript" src="lib/html5.js"></script>
<script type="text/javascript" src="lib/respond.min.js"></script>
<script type="text/javascript" src="lib/PIE_IE678.js"></script>
<![endif]-->
<link href="css/H-ui.min.css" rel="stylesheet" type="text/css" />
<link href="css/H-ui.admin.css" rel="stylesheet" type="text/css" />
<link href="lib/icheck/icheck.css" rel="stylesheet" type="text/css" />
<link href="lib/Hui-iconfont/1.0.1/iconfont.css" rel="stylesheet" type="text/css" />
<link href="lib/webuploader/0.1.5/webuploader.css" rel="stylesheet" type="text/css" />
 <style type="text/css">
      #view{}
      #view{} .imgbox{float:left;position:relative;width:200px;height: 150px;margin-left: 10px;margin-top: 10px;
      padding:5px;border:solid 1px red;border-radius: 5px;;}
      #view{} .imgbox .close{border: solid 1px red;position: absolute;top: -15px;
      width: 20px;height: 20px; display: inherit;cursor: pointer;text-align: center;background: red;color: #fff;right: -10px;z-index: 20;border-radius: 100%;}
      #view{} .imgbox input{width:100%;height: 100%;z-index: 10;}
    </style>
<title>新增饮食</title>
</head>
<body>
<div class="pd-20">
	<form action="/baby/usaService/updateUsaService" method="post" class="form form-horizontal form-eat" id="form"  enctype="multipart/form-data">

		<div class="row cl">
			<label class="form-label col-1">标题:</label>
			<div class="formControls col-3">
				<input type="text" class="input-text" value="" placeholder="" id="title" name="title">
         <input type="hidden" name="id" value="" id="titleid">
         <input type="hidden" name="type" value="0">
			</div>
		</div>

    <div class="row cl">
      <label class="form-label col-1">简介:</label>
      <div class="formControls col-6">
         <textarea class="textarea" name="introduce" id="introduce"></textarea>
      </div>
    </div>

    <div class="row cl">
      <label class="form-label col-1">已有图片:</label>
        <div class="formControls col-8">
        <div class="portfoliobox" id="str">
     
        </div>
        </div>
    </div>
		<div class="row cl">
			<label class="form-label col-1">图片上传：</label>
			<div class="formControls col-10">
        <input type="file" name="file" id="file" datatype="*" nullmsg="请上传图片"  onchange="load(this)" multiple="multiple" accept="image/*" class='myfile'></input>
        <div id="view"></div>
			</div>
		</div>

		<div class="row cl">
			<div class="col-10 col-offset-1">
				<input type="submit" class="btn btn-primary radius"  name="submit"  value="提交" class="submit" />
			</div>
		</div>
	</form>
</div>
</div>
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="lib/icheck/jquery.icheck.min.js"></script> 
<script type="text/javascript" src="js/H-ui.js"></script> 
<script type="text/javascript" src="js/H-ui.admin.js"></script> 
<script src="js/jquery-form.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.validate.min.js" ></script>
<script type="text/javascript" src="js/messages_zh.min.js" ></script>
<script type="text/javascript" src="js/rule.js" ></script>
<script>

  function getQueryString(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
      var r = window.location.search.substr(1).match(reg);
      if (r != null) return unescape(r[2]); return null;
    }

  var sid = getQueryString("sid");

  //请求数据
  $.ajax({  
    url:'/baby/usaService/getUsaService',// 跳转到 action  
    data:{key:sid},  
    type:'post',  
    cache:false,  
    dataType:'json',  
    success:function(data) { 
        if(data.code =="2000" ){
        var data = data.data;
        $("#title").val(data.title);
        $("#titleid").val(data.sid);
        $("#introduce").val(data.introduce);

        // 拼装html
        var imglist = data.imgData;
        var htmlstr='';
        for (var i=0;i<imglist.length;i++){
        var obj = imglist[i];//获取单个数据对象
        console.log(obj);
        var imgsid = '\'' +obj.sid+ '\'';
        var imgsrc = obj.realPicUrl;
        htmlstr+= '<div style="float:left;"><div class="picbox mb-10"><img style="max-height:150px;max-width:200px;" src="'+imgsrc+'"></div>'
                + '<div class="btn btn-secondary radius delimg" onclick="delimg(\''+obj.imageUrl+'\');">删除</div> </div>'

      
            

       }
       document.getElementById("str").innerHTML =htmlstr 
       }else{
          alert(data.message);
        }
      }, 
      error : function() {      
        alert("异常！");  
    }  
  });



//删除图片

function delimg(id){

  $.ajax( {  
    url:'/baby/uploadImg/deletePic',// 跳转到 action  
    data:{key:id},  
    type:'get',  
    cache:false,  
    dataType:'json',  
    success:function(data) { 
        // console.log(data);
        if(data.code =="2000" ){ 
          alert(data.message);
          window.location.reload();
        }else{
          alert(data.message);
        }
      }, 
      error : function() {      
        alert("异常！");  
    }  
  });

}


$('body').on('click','.close',function(){
  $(this).parent('.imgbox').remove();
});

$(document).ready(function(){

        $('#form').ajaxForm(function(data){
            //alert(data);//弹出ajax请求后的回调结果，data回调数据  onclick="sub()"
            if(data.code =="2000" ){ 
             alert(data.message); 
             //setCookie("username",data.data.userName);
             window.location.href='eat-list.html'
            // window.location.reload();   
         }else{  
              alert(data.message); 
             console.log(data);  
         }  
        });

});

function load(file) {
  var num=1;
  if (file.files) {
  	$('.imgbox').remove()
  for (var i = 0; i < file.files.length; i++) {
  var reader = new FileReader();
  reader.readAsDataURL(file.files[i]);
  reader.onload = function(evt) {
  var imgbox=$('<div></div>');
  imgbox.addClass('imgbox');
  $('#view').append(imgbox);

  var imgs = $('<input type="image" />');
  imgs.attr('name','mum'+num);
  num++;
  imgs.appendTo(imgbox);
  imgs.attr('src', evt.target.result);
  }
}
}
}





</script>

</body>
</html>